
.main{
	width: 100%;
	height: 100vh;
	background-color: #fff;
	// background: @context-primary;
	overflow: hidden;
	.about{
		position: relative;
		width: calc(100% - 64rpx);
		margin: auto;
		
		.about-top{
			width: calc(100% - 64rpx);
			position: fixed;
			left: 32rpx;
			z-index: 9999;
			.header{
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.header_img{
					width: 116rpx;
					height: 68rpx;
					image{
						width: 76rpx;
						height: 100%;
					}
				}
			
				.icon{
					width: 116rpx;
					height: 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					image{
						width: 40rpx;
						height: 100%;
					}
				}
			}
			.u_tabs{
				width: 100%;
				height: 100rpx;
			}
		}
		
		.booklist-container {
			position: relative;
			
		}
		.addShortcut{
			width: 96%;
			height: 120rpx;
			position: fixed;
			bottom: 12rpx;
			left: 2%;
			border-radius: 20rpx;
			.all{
				width: 100%;
				height: 100%;
				position: relative;
				border-radius: 20rpx;
				.image{
					position: absolute;
					width: 100%;
					height: 120rpx;
					left: 0;
					top: 0;
					z-index: -10;
					opacity: 0.8;
				}
				.content{
					width: 100%;
					height: 100%;
					z-index: 9999;
					color: #000;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					.imgkdxgs{
						margin-left: 52rpx;
						width: 70rpx;
						height: 70rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.center{
						margin-left: 52rpx;
						.top_title{
							font-weight: 700;
							font-size: 36rpx;
							color: #FFFFFF;
						}
						.bottom_title{
							font-weight: 400;
							color: #26262C;
							font-size: 20rpx;
							margin-top: 10rpx;
						}
					}
					.add{
						width: 120rpx;
						height: 44rpx;
						border-radius: 200rpx;
						background-color: #fff;
						color: #000;
						text-align: center;
						line-height: 44rpx;
						font-size: 24rpx;
						font-weight: 500;
						margin-left: 88rpx;
						.u-reset-button{
							color: @color-normal;
						}
					}
					.del{
						width: 21rpx;
						height: 21rpx;
						margin-bottom: 16rpx;
						margin-left: 50rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
}
.banner{
	width: 100%;
	height: 300rpx;
	border-radius: 14rpx;
	overflow: hidden;
}
.list-title{
	display: flex;
	align-items: center;
	font-size: 36rpx;
	color: #202020;
	margin:	20rpx 0;
	.hot-img{
		width: 40rpx;
		height: 40rpx;
		margin-right: 15rpx;
	}
}
	.indexsearch {
		height: 64rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		.indexhezi {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 64rpx;
			width: 580rpx;
			border-radius: 60rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 22rpx 32rpx rgba(228, 192, 192, 0.22);
			.indexiconn{
				position: absolute;
				left: 0;
				top: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 120rpx;
				height: 100%;
				image{
					width: 28rpx;
					height: 28rpx;
					
				}
			}
			#indexbtn {
				width: 418rpx;
				text-align: center;
				height: 100%;
				font-size: 28rpx;
				color: #91929F;
				min-height: 0 !important;
				overflow: hidden;
			}
		}
	
	}
	
	.search-btn{
		width: 126rpx;
		height: 64rpx;
		border-radius: 200rpx;
		background: @color-normal;
		text-align: center;
		line-height: 64rpx;
		color: #FFFFFF;
		font-size: 28rpx;
	}
	.hot-tabs{
		border-radius: 28rpx;
		margin: 12rpx 0;
		// box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
	}
	/deep/ .scroll-view{
		position: absolute;
		top: 100rpx;
		.scroll-view-item{
			height: 100%;
		}
	}
	/deep/ .swiper-item-item{
		display: flex;
		align-items: center;
	}
	

